<script setup lang="ts">
import HomeBottemIcons from '@/components/HomeBottemIcons.vue';
import {
  ref,getCurrentInstance,defineProps
} from "vue";
const applists = ref([])
const global=getCurrentInstance().appContext.config.globalProperties;
global.$http.get('/AppStore/rankinglist',{
  params:{
  }
})
.then(resp=>{
  console.log(resp)
  applists.value=resp.data;
})
.then(err=>{
  new Error(err);
})
const props = defineProps<{
  userId: string; // user的id
}>();
// 直接使用 props.userId
console.log('接收到的 userId:', props.userId)
</script>

<template>
  <el-affix :offset-top="0" :z-index="999">
  <el-col :span="24">
    <div style="background-color: rgb(64, 158, 255); height: 40px; display: flex; justify-content: left;
  align-items: center;">
      <el-icon :size="30" @click="$router.back()" style="color: white; margin: 8px;">
        <ArrowLeftBold />
      </el-icon>
    </div>
  </el-col>
  </el-affix>
  <el-row v-for="item in applists" :key="item.id">
    <el-col :span="2">
      <span class="sort">
        {{item.sort}}
      </span>
    </el-col>
    <el-col :span="6" class="img">
    <router-link :to="{ name: 'AppView', params: { id: item.appid},query: { userId: userId }}" tag="div">
        <el-image :src="item.appurl"></el-image>
     </router-link>
    </el-col>
    <el-col :span="14">
      <div>
        <span style="font-size: 20px;font-weight: bold;padding-left: 5px">{{item.appname}}</span>
        <br>
        <span style="font-size: 15px;padding-left: 5px">{{item.applocation}}</span>
        <br>
        <span style="font-size: 15px;padding-left: 5px">{{item.apprecommend}}</span>
      </div>
    </el-col>
  </el-row>
  <home-bottem-icons/>
</template>

<style scoped>
.sort{
  display: flex;
  justify-content: center;
  line-height: 106px;
  font-size: xx-large;
  color: coral;
}
.img{
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中 */
}


</style>